import React, { Component, PureComponent } from 'react'
/** 
    PureComponent:会对组件的属性（props）和状态（state）进行浅层比较，不一样时才更新
    memo:会对函数组件的属性进行浅层比较
    useMemo:缓存一个值（回调函数return的值）
    useCallback:缓存一个函数（useCallback的第一个函数）
    setState 和 hooks中setName中的参数可以是个回调函数，
        回调函数的参数是原状态，回调函数的返回值作为新状态
    状态更新在react事件处理函数中和生命周期函数中是会进行合并的
*/
class Child extends Component{
    shouldComponentUpdate(preProps, prevState){
        return preProps.num !== this.props.num;   //只有不一样（即num改变时才会更新）
    }
    // shouldComponentUpdate(){
    //     return false;   //不再执行render
    // }
    render(){
        return(
            <div>
                <h2>这是个子组件  好哦！</h2>
                <h2>{this.props.num}</h2>
            </div>
        )
    }
}

export default class PureCom extends Component {
    state = {num:0, list:[1,2,3]};
    add = ()=>{
        this.setState({num:(this.state.num + 1)});
        this.setState({list:[...this.state.list, 4]});
        //this.setState((state)=>({num: state+1}));    //返回的是对象一队要加{},一个状态是一个值
    }

    render() {
        console.log(this.state.num)
        return (
            <div>
                {this.state.list.map(item=><li>{item}</li>)}
                    
                <h1>{this.state.num}</h1>
                <button onClick={this.add}>加一！</button>
                {/* 将num的状态传递给child，然后它通过props接收到 */}
                <Child num={this.state.num} />        
            </div>
        )
    }
}
